import React, { Component } from 'react'
// rcc => React Class Component

// !1. 给按钮绑定点击事件
// !2. 获取原来的数字
// 3. 在原来的基础上 +1

export default class App extends Component {
  state = {
    count: 0,
    age: 18,
  }
  handleClick = () => {
    // console.log(this.state.count)
    // this.state.count += 1
    // 数据确实变化了，但是视图没有更新
    // console.log(this.state.count)
    // setState 的操作是合并，不上覆盖，意味着不会影响原来 state 种的 age
    this.setState({
      // key => 修改谁
      // value => 改成什么
      count: this.state.count + 1,
    })
  }
  render() {
    return (
      <div style={{ textAlign: 'center' }}>
        <h3>计数器：{this.state.count}</h3>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
